<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>${empty general ? '添加武将' : '编辑武将'}</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
        }

        /* 全局样式 */
        body {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
            url('${pageContext.request.contextPath}/i.png') no-repeat center center fixed;
            background-size: cover;
            color: #f0f0f0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 主容器 */
        .container {
            width: 100%;
            max-width: 600px;
            background: rgba(30, 30, 30, 0.3);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(212, 167, 106, 0.3);
            backdrop-filter: blur(8px);
            padding: 30px;
            transition: all 0.3s ease;
        }

        .container:hover {
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
        }

        /* 标题样式 */
        h1 {
            color: #d4a76a;
            font-size: 2rem;
            text-align: center;
            margin-bottom: 25px;
            letter-spacing: 1px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
            position: relative;
            padding-bottom: 10px;
        }

        h1:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(to right, transparent, #d4a76a, transparent);
        }

        /* 表单组 */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #d4a76a;
            font-size: 0.95rem;
            font-weight: bold;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: #fff;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #d4a76a;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 3px rgba(212, 167, 106, 0.2);
        }

        /* 按钮组 */
        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 2rem;
        }

        .btn {
            padding: 12px 24px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            text-decoration: none;
            text-align: center;
            font-size: 1rem;
            min-width: 120px;
        }

        .btn-save {
            background: linear-gradient(135deg, #d4a76a, #b88746);
            color: #1a1a1a;
        }

        .btn-save:hover {
            background: linear-gradient(135deg, #b88746, #d4a76a);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }

        .btn-cancel {
            background: rgba(255, 99, 132, 0.2);
            color: #ff6384;
            border: 1px solid #ff6384;
        }

        .btn-cancel:hover {
            background: rgba(255, 99, 132, 0.4);
            transform: translateY(-2px);
        }

        /* 属性值指示器 */
        .stat-indicator {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }

        .stat-value {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
            margin-right: 10px;
        }

        .stat-fill {
            height: 100%;
            background: linear-gradient(to right, #d4a76a, #b88746);
            width: 0%;
        }

        .stat-number {
            font-size: 0.9rem;
            color: #d4a76a;
            min-width: 30px;
            text-align: right;
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .container {
                padding: 20px;
            }

            .button-group {
                flex-direction: column;
                gap: 10px;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>${empty general ? '添加武将' : '编辑武将'}</h1>

    <form action="general" method="post">
        <input type="hidden" name="action" value="save">
        <c:if test="${not empty general}">
            <input type="hidden" name="id" value="${general.id}">
        </c:if>

        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" name="name" class="form-control"
                   value="${general.name}" required placeholder="请输入武将姓名">
        </div>

        <div class="form-group">
            <label for="strategy">谋略</label>
            <input type="number" id="strategy" name="strategy" class="form-control"
                   value="${general.strategy}" min="0" max="100" required
                   oninput="updateStatIndicator('strategy', this.value)">
            <div class="stat-indicator">
                <div class="stat-value">
                    <div class="stat-fill" id="strategy-fill"></div>
                </div>
                <span class="stat-number" id="strategy-value">${general.strategy}</span>
            </div>
        </div>

        <div class="form-group">
            <label for="force">武力</label>
            <input type="number" id="force" name="force" class="form-control"
                   value="${general.force}" min="0" max="100" required
                   oninput="updateStatIndicator('force', this.value)">
            <div class="stat-indicator">
                <div class="stat-value">
                    <div class="stat-fill" id="force-fill"></div>
                </div>
                <span class="stat-number" id="force-value">${general.force}</span>
            </div>
        </div>

        <div class="form-group">
            <label for="agility">敏捷</label>
            <input type="number" id="agility" name="agility" class="form-control"
                   value="${general.agility}" min="0" max="100" required
                   oninput="updateStatIndicator('agility', this.value)">
            <div class="stat-indicator">
                <div class="stat-value">
                    <div class="stat-fill" id="agility-fill"></div>
                </div>
                <span class="stat-number" id="agility-value">${general.agility}</span>
            </div>
        </div>

        <div class="button-group">
            <button type="submit" class="btn btn-save">保存</button>
            <a href="general?action=list" class="btn btn-cancel">取消</a>
        </div>
    </form>
</div>

<script>
    // 初始化属性指示器
    function initStatIndicators() {
        updateStatIndicator('strategy', document.getElementById('strategy').value);
        updateStatIndicator('force', document.getElementById('force').value);
        updateStatIndicator('agility', document.getElementById('agility').value);
    }

    // 更新属性指示器
    function updateStatIndicator(stat, value) {
        const fill = document.getElementById(stat + '-fill');
        const number = document.getElementById(stat + '-value');

        if (fill && number) {
            const percent = Math.min(100, Math.max(0, value));
            fill.style.width = percent + '%';
            number.textContent = value;
        }
    }

    // 页面加载时初始化
    window.onload = function() {
        initStatIndicators();
    };
</script>
</body>
</html>